<!DOCTYPE HTML>
<!--HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。-->
<html>

<head>

</head>

<body>
    <!--canvas元素本身没有绘图的能力，所有的绘制工作必须在js内部完成-->
    <!--DOM浏览器会从上到下一个标签一个标签的解析，如果把script标签放到head里面，那么会首先把head里面所有的的js脚本文件加载完毕，然后再去加载html文件，此处
    html如果放到head
-->
    <canvas id="myCanvas" width="200" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript" async>
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#FF00FF";
        cxt.beginPath();
        cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
        cxt.closePath();
        cxt.fill();
    </script>
    <canvas id="secondCanvas" width="200" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c = document.getElementById("secondCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#FF0000";
        cxt.fillRect(0, 0, 150, 75);
    </script>
    <canvas id="thirdCanvas" width="200" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c = document.getElementById("thirdCanvas");
        var cxt = c.getContext("2d");
        cxt.moveTo(0, 0);
        cxt.lineTo(150, 50);
        cxt.lineTo(10, 50);
        cxt.stroke();
    </script>
    <canvas id="fourthCanvas" width="200" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c = document.getElementById("fourthCanvas");
        var cxt = c.getContext("2d");
        var grd = cxt.createLinearGradient(0, 0, 175, 50);
        grd.addColorStop(0, "#FF0000");
        grd.addColorStop(1, "#00FF00");
        cxt.fillStyle = grd;
        cxt.fillRect(0, 0, 100, 200);
    </script>
    <canvas id="fiveCanvas" width="200" height="300" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
        var c = document.getElementById("fiveCanvas");
        var cxt = c.getContext("2d");
        var imae = new Image();
        imae.src = " ../resource/abc.png";
        cxt.drawImage(imae, 200, 300);
    </script>

</body>


</html>